<!DOCTYPE html>
<html>
<head>
	<title>后台管理系统登录模板</title>

	<meta name="keywords" content="后台管理系统登录模板"/>
	
	<meta name="description" content="最全的后台管理系统登录模板下载网站http://cn.inspinia.cn"/>
	<link rel="stylesheet" href="css/style.css" >
	<link href="css/popup-box.css"  rel="stylesheet" type="text/css" media="all" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

	</script><script src="js/jquery.min.js" ></script>
<script src="js/jquery.magnific-popup.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.53451.js" ></script> 
 <script>
		$(document).ready(function() {
		$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',
			fixedContentPos: false,
			fixedBgPos: true,
			overflowY: 'auto',
			closeBtnInside: true,
			preloader: false,
			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
		});
		});
																		

        function insertUser() {
            var user = {};
            user.userName = $("#userName").val();
            user.password = $("#password").val();

            $.ajax({
                url : "http://www.sfac.xyz/api/login",
                type : "post",
                contentType : "application/json",
                data : JSON.stringify(user),
                success : function (result) {
                    if (result.status == 200){
                        alert(result.message);
                        console.log(result.data);
						location.href = "index1.html";
                    }
                    else{
                        alert(result.message);
                    }
                },
                error : function (erro) {
                    console.log(error);
                }
            })
        };
</script>
		
</head>
<body>
	<h1>Sign In And Sign Up Forms</h1>
	<div class="w3layouts">
		<div class="signin-agile">
			<h2>Sign In</h2>
			<form action="javascript:void(0);" method="post">
				<input type="text" name="name" id = "userName"class="name" placeholder="Username" required="">
				<input type="password" name="password" id ="password" class="password" placeholder="Password" required="">
				<ul>
					<li>
						<input type="checkbox" id="brand1" value="">
						<label for="brand1"><span></span>Remember me</label>
					</li>
				</ul>
				<a href="#">Forgot Password?</a><br>
				<div class="clear"></div>
				<input type="submit" onclick="insertUser()" value="Login">
			</form>
		</div>
		<div class="signup-agileinfo">
			<h3>Sign Up</h3>
			<p>Phasellus vel urna magna. Quisque molestie felis varius ex faucibus auctor. Aenean sit amet erat ullamcorper, condimentum odio in, commodo tellus.</p>
			<div class="more">
				<a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog">Sign Up</a>				
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="footer-w3l">
		<p class="agileinfo"> &copy; 2016 Sign In And Sign Up Forms . All Rights Reserved | Design by <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a></p>
	</div>
	<div class="pop-up"> 
	<div id="small-dialog" class="mfp-hide book-form">
		<h3>Sign Up Form </h3>
			<form action="#" method="post">
				<input type="text" name="Name" placeholder="Your Name" required=""/>
				<input type="text" name="Email" class="email" placeholder="Email" required=""/>
				<input type="password" name="Password" class="password" placeholder="Password" required=""/>
				<input type="password" name="Password" class="password" placeholder="Confirm Password" required=""/>					
				<input type="submit" value="Sign Up">
			</form>
	</div>
</div>	
<body>
</html>